<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title>CSS Position Rules</title>
	<style type="text/css">
		body {font-size:25px}
		div {border:1px solid red; background-color:white;}
	</style>
</head>

<body>
	<div style="position:absolute;top:100px;left:200px;height:600px;width:700px">
		absolute positioned<br />
		<br />
		<div style="position:relative;left:20px;">
			relative positioned<br />
			notice the width! it is because default width is 100% of parent element<br />
		</div>
		<div style="position:absolute;left:400px;top: 50px">absolute positioned</div>
		<div style="position:absolute;left:120px;top: 130px;height:450px;width:500px;overflow:scroll">
			absolute positioned, scrolled<br />
			width and height are specified by css<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<hr/ >
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<div style="position:absolute;right:20px;bottom:20px;vertical-align:bottom;height:100px;">absolute positioned</div>
		</div>
		<div style="position:fixed;top:50px;right:10px;">
			fixed position<br />
			This element is fixed in the SCREEN, not the parent element
		</div>
	</div>
	<br />
	<br />
	<br />
	<br />
	notice this text!<br />
	in code appears <br />
	after the divs<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/" title="css positioning">Link to very good demonstration of positioning and floating</a><br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	Some text to make the browser show scrollers
</body>

</html>